<template>
  <div class="app-container">
    <div v-if="!isPreShow">
      <div class="filter-container">
        <el-form ref="queryForm" :model="listQuery" :rules="queryRules" label-position="left">
          <el-form-item label="" size="mini" prop="title" style="float: left;">
            <el-input v-model="listQuery.title" placeholder="请输入标题" class="filter-item" style="width: 160px;margin-right:5px;"></el-input>
          </el-form-item>
          <el-form-item label="" size="mini" prop="username" style="float: left;">
            <el-input v-model="listQuery.username" placeholder="请输入用户名" class="filter-item" style="width: 120px;margin-right:5px;"></el-input>
          </el-form-item>
          <el-button v-waves size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="getList">{{ $t('node_list.button.search') }}</el-button>
          <el-button v-waves size="mini" class="filter-item" type="danger" @click="resetQueryForm('queryForm')">{{ $t('node_list.button.reset') }}</el-button>
          <el-button v-waves size="mini" style="float: right;margin-right: 100px;" type="primary" icon="el-icon-plus" @click="handleAdd(0)" :to="'add/0'">
            {{ $t('node_list.button.add') }}
          </el-button >
        </el-form>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        size="mini"
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="nodeTable"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column width="280px" align="left" :label="$t('node_list.table.title')">
          <template slot-scope="{row}">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column width="160px" align="center" :label="$t('node_list.table.author')">
          <template slot-scope="{row}">
            <span>{{ row.author_name }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120px" align="center" :label="$t('node_list.table.category')">
          <template slot-scope="{row}">
            <span>{{ row.category_title }}</span>
          </template>
        </el-table-column>
        <el-table-column width="280px" align="center" :label="$t('node_list.table.remark')">
          <template slot-scope="{row}">
            <span>{{ row.summary }}</span>
          </template>
        </el-table-column>
        <el-table-column width="180px" :label="$t('node_list.table.created_time')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.publish_at }}</span>
          </template>
        </el-table-column>
        <el-table-column width="100px" :label="$t('node_list.table.state')" align="center">
          <template slot-scope="{row}">
            <button  style="color: grey" v-if="row.state === 1">待上架</button>
            <button  style="color: green" v-if="row.state === 2">已发布</button>
            <button  style="color: red" v-if="row.state === -1">已删除</button>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('node_list.table.operate')">
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="small"
              @click="handlePreShow(row)"
            >
              {{ $t('node_list.button.preview') }}
            </el-button>
            <router-link class="el-button el-button--success el-button--mini" :disabled="row.status === -1" :to="'add/' + row.id">
              {{ $t('node_list.button.edit') }} <i class="el-icon-edit" />
            </router-link>
            <el-button
              :disabled="row.state === -1"
              type="primary"
              size="small"
              @click="handleStatus(row)"
            >
              <span v-if="row.state === 1"><i class="el-icon-top"/> {{ $t('node_list.button.publish') }}</span>
              <span v-if="row.state === 2"><i class="el-icon-bottom"/> {{ $t('node_list.button.un_publish') }}</span>
            </el-button>
            <el-button
              :disabled="row.state === -1"
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleDel(row.id)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 10px;">
        <el-select v-model="tableAction" size="mini" placeholder="操作" style="width: 100px">
          <el-option
            class=""
            v-for="item in tableActionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-thumb"
          @click="tableActionSubmit()"
        >
          {{ $t('node_list.button.submit') }}
        </el-button>
      </div>
      <pagination style="margin-top: 1px; padding-top: 10px;" v-show="+listTotal > 0" :total="listTotal" :page.sync="listQuery.page_index" :limit.sync="listQuery.page_size" @pagination="getList" />
    </div>
    <el-container v-if="isPreShow" style="margin: 15px;">
      <el-header class="pre-show-top">
        <el-page-header @back="goBack" content="预览"></el-page-header>
      </el-header>
      <el-main>
        <h3 style="text-align: center">{{ preShowData.title }}</h3>
        <div class="pre-body" v-html="preShowData.content"></div>
        <template>
          <el-backtop target=".pre-show-top">
            <div
              style="{
          height: 100%;
          width: 100%;
          background-color: #f2f5f6;
          box-shadow: 0 0 6px rgba(0,0,0, .12);
          text-align: center;
          line-height: 40px;
          color: #1989fa;
        }"
            >
              UP
            </div>
          </el-backtop>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { nodeList, nodeDel, nodeState } from '@/api/node'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination/index'
import local from '@/lang/content/node_list'

export default {
  name: 'NodeList',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      list: [],
      listTotal: 0,
      listLoading: true,
      listQuery: {
        page_index: 1,
        page_size: 10,
        title: '',
        username: ''
      },
      isPreShow: false,
      multipleSelection: [],
      tableAction: '',
      tableActionOptions: [{
        value: 'del',
        label: '删除'
      }, {
        value: 'status-in',
        label: '上架'
      }, {
        value: 'status-out',
        label: '下架'
      }],
      queryRules: {
        title: [
          { required: false, message: '需要填写标题', trigger: 'blur' }
        ],
        username: [
          { required: false, message: '', trigger: 'blur' }
        ]
      },
      preShowData: {
        title: '',
        content: ''
      },
      preShowDialogStatus: false
    }
  },
  created() {
    this.resetQueryData()
    this.getList()
    if (!this.$i18n.getLocaleMessage('en')['node_list']) {
      this.$i18n.mergeLocaleMessage('en', local.en)
      this.$i18n.mergeLocaleMessage('zh', local.zh)
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      nodeList(this.listQuery).then(response => {
        if (response.success) {
          this.list = response.data.data
          this.listTotal = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 200)
        } else {
          this.$message({
            type: 'error',
            message: response.msg
          })
          setTimeout(() => {
            this.listLoading = false
          }, 200)
        }
      })
    },
    handlePreShow(node) {
      this.preShowData.title = node.title
      this.preShowData.content = node.content
      this.isPreShow = true
    },
    handleStatus(node) {
      const action = node.state === 1 ? 'publish' : 'un_publish'
      const actionTip = node.state === 1 ? '上架' : '下架'
      this.$confirm('此操作将' + actionTip + '指定的内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        nodeState(node.id, action).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: actionTip + '成功!'
            })
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: response.msg
            })
          }
        }).catch(err => {
          this.$message({
            type: 'success',
            message: err
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDel(id) {
      this.$confirm('此操作将删除指定的内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        nodeDel(id).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: response.msg
            })
          }
        }).catch(err => {
          this.$message({
            type: 'success',
            message: err
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    tableActionSubmit() {
      console.log(this.multipleSelection)
    },
    resetQueryForm(formName) {
      this.$refs[formName].resetFields()
    },
    resetQueryData() {
      this.listQuery = {
        page_index: 1,
        page_size: 10,
        title: '',
        username: ''
      }
    },
    handleAdd(id) {
      this.$router.push({ path: '/content/node/add/' + id })
    },
    goBack() {
      this.isPreShow = false
    }
  }
}
</script>

<style>
  .pre-body {
    width: 100%;
    padding: 45px;
  }
  .pre-body img {
    max-width:90%;
  }
</style>
